<template>
    <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="请输入用户名">
            <el-input v-model="searchForm.account" clearable />
        </el-form-item>

        <el-form-item>
            <el-button @click="handleseach">查询</el-button>
            <el-button type="primary">新增</el-button>
        </el-form-item>
        </el-form>
    </div>

    <el-table :data="tableData" style="width: 100%;">
    <el-table-column label="用户名" width="180" prop="account">

    </el-table-column>
    <el-table-column label="等级" width="180" prop="level">
        
    </el-table-column>
    <el-table-column label="操作">
        <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index.scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="deleteaccount(scope.row)">删除</el-button>

        </template>
    </el-table-column>
    </el-table>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMesssageBox } from 'element-plus'
import { getDataApi, deleAccountApi } from '../utils/mockServer/da.js'
const searchForm = ref({
    account:''
})

//设置按钮间距

//表格数据
const tableData = ref([])

const getData = (account) => {
    tableData.value = getDataApi({ account })
}

getData()

const handleseach = (account) => {
    getData(searchForm,value,account)
}

const deleteaccount = (row) => {
    ElMesssageBox,confirm(
        '是否删除',
        '警告',
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'警告',
        }
    )
}
</script>